<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('rbac.resource.authInfo')"
    align-center
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <WsmTable
      ref="table"
      load-url="/rbac-server/rbac/userrole/page"
      v-model="queryFormType"
      :change-load="true"
      :is-layout="false"
      table-height="300px"
    >
      <template #title>{{ t('rbac.orgRole.authList') }}</template>
      <template #button="{ row }">
        <el-button v-hasPermi="'removeAuthUser'" v-if="row" @click="del(row.id)" type="danger">{{
          t('common.remove')
        }}</el-button>
      </template>
      <template #column>
        <el-table-column prop="userCode" :label="t('rbac.orgRole.userCode')" width="100" />
        <el-table-column prop="userTypeName" :label="t('rbac.orgRole.userTypeName')" width="180" />
        <el-table-column prop="userName" :label="t('rbac.orgRole.userName')" width="120" />
        <el-table-column prop="idCard" :label="t('rbac.orgRole.idCard')" width="220" />
        <el-table-column prop="userOrgName" :label="t('rbac.orgRole.userOrgName')" width="180" />
        <el-table-column prop="userOrgShortName" :label="t('rbac.orgRole.userOrgShortName')" />
      </template>
    </WsmTable>
  </el-dialog>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { useI18n } from '@/hooks/web/useI18n'
import { delApi } from '@/api/rbac/userrole'
import { reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { QueryFormType } from '@/components/WsmTable/src/types'

const emit = defineEmits(['afterDelete'])

const centerDialogVisible = ref<boolean>(false)

const { t } = useI18n()

//表格对象
const table = ref()

const queryFormType: QueryFormType = reactive({
  orId: {
    value: '',
    clear: false
  }
})

const show = async (id: string) => {
  queryFormType.orId.value = id
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

const del = async (id: string) => {
  ElMessageBox.confirm(t('common.removeMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi(id)
    if (rs.success) {
      table.value.load(1)
      emit('afterDelete')
    }
  })
}
//暴露方法
defineExpose({ show, hide })
</script>
<style scoped></style>
